<template>
	<div>
		<!-- 文章列表 -->
		<van-list
			class="list"
			finished-text="没有更多数据了"
			@load="handleLoad"
			v-model:loading="loading"
			:finished="finished"
		>
			<dl
				v-for="v in list"
				:key="v.id"
				:class="{ active: checkIsActive(v.id) }"
				@click="$router.push({ name: 'listDetail', params: { id: v.id } })"
			>
				<dd>
					<h2>{{ v.title }}</h2>
				</dd>
				<dt>
					<img :src="v.url" style="width:100%" />
				</dt>
				<dd>
					<p>{{ v.auther }} {{ v.createTime }}</p>
				</dd>
			</dl>
		</van-list>
	</div>
</template>

<script lang="ts" setup>
import { computed, onMounted, reactive, ref } from 'vue'
import { fetchList } from '@/api'
import { ListItem } from '@/interfaces'
import { useStore } from 'vuex'
const store = useStore()
const listHistory = computed(() => store.state.listHistory)

const checkIsActive = (id: string) => {
	return listHistory.value.some((v: ListItem) => v.id === id)
}

const page = reactive({
	pageCode: 1,
	pageSize: 8
})
const list = ref<ListItem[]>([])
const finished = ref(false);
const loading = ref(false);

const handleLoad = async () => {
	finished
	loading.value = true
	await getList()
	loading.value = false
}

const getList = async () => {
	const resp = await fetchList(page)
	const { code, data, isFinish } = resp.data
	if (code === 200) {
		finished.value = isFinish
		list.value = list.value.concat(data)
		page.pageCode++
	}
}

</script>

<style lang="scss" scoped>
.list {
	padding: 10px;
	.active {
		color: #ccc;
	}
}
</style>